<script lang="ts">
    import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
    import Collapse from '$lib/components/Data/Collapse/Collapse.svelte';
    import CollapseItem from '$lib/components/Data/Collapse/CollapseItem.svelte';
    import Icon from '$lib/components/Basic/Icon/Icon.svelte';
    import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
    let activeItems = [''];
    const code1 = `<script lang="ts">
    import Collapse from '$lib/components/Data/Collapse/Collapse.svelte';
    import CollapseItem from '$lib/components/Data/Collapse/CollapseItem.svelte';
    let activeItems = [''];
<\/script>
<div class="example">
    <div class="example-group">
        <Collapse bind:modelValue={activeItems}>
            <CollapseItem name="Consistency" title="Consistency">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                </div>
            </CollapseItem>
            <CollapseItem name="Feedback" title="Feedback">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                </div>
            </CollapseItem>
            <CollapseItem name="Efficiency" title="Efficiency">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                </div>
            </CollapseItem>
        </Collapse>
    </div>
</div>`;
    const code2 = `<script lang="ts">
    import Collapse from '$lib/components/Data/Collapse/Collapse.svelte';
    import CollapseItem from '$lib/components/Data/Collapse/CollapseItem.svelte';
    let activeItems = [''];
<\/script>
<div class="example">
    <div class="example-group">
        <Collapse bind:modelValue={activeItems} accordion={true}>
            <CollapseItem name="Consistency" title="Consistency">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                </div>
            </CollapseItem>
            <CollapseItem name="Feedback" title="Feedback">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                </div>
            </CollapseItem>
            <CollapseItem name="Efficiency" title="Efficiency">
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                </div>
            </CollapseItem>
        </Collapse>
    </div>
</div>`;
    const code3 = `<script lang="ts">
    import Collapse from '$lib/components/Data/Collapse/Collapse.svelte';
    import CollapseItem from '$lib/components/Data/Collapse/CollapseItem.svelte';
    import Icon from '$lib/components/Basic/Icon/Icon.svelte';
    let activeItems = [''];
<\/script>
<div class="example">
    <div class="example-group">
        <Collapse bind:modelValue={activeItems} accordion={true}>
            <CollapseItem name="Consistency" title="">
                {#snippet titleSlot()}
                    <div style="display: flex; align-items: center;gap: 6px;">
                        <Icon src="interface/palette" size={18}></Icon>
                        <span>Consistency</span>
                    </div>
                {/snippet}
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                </div>
            </CollapseItem>
            <CollapseItem name="Feedback" title="">
                {#snippet titleSlot()}
                    <div style="display: flex; align-items: center;gap: 6px;">
                        <Icon src="logo/favicon" size={18}></Icon>
                        <span>Feedback</span>
                    </div>
                {/snippet}
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                </div>
            </CollapseItem>
            <CollapseItem name="Efficiency" title="">
                {#snippet titleSlot()}
                    <div style="display: flex; align-items: center;gap: 6px;">
                        <Icon src="office/notifications" size={18}></Icon>
                        <span>Efficiency</span>
                    </div>
                {/snippet}
                <div style="padding: 10px 16px;line-height: 1.5em;">
                    Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                </div>
            </CollapseItem>
        </Collapse>
    </div>
</div>`;
const attributesData1 = [
		{ id: 1, name: 'modelValue', describe: '当前活动面板', type: 'string[]', defaulValue: '' },
		{ id: 2, name: 'accordion', describe: '是否手风琴模式', type: 'boolean', defaulValue: 'false' },
	];
const eventsData1 = [
    { id: 1, name: 'onUpdate', describe: '切换当前活动面板', type: '(next: string[]) => void' },
];
const attributesData2 = [
		{ id: 1, name: 'name', describe: '唯一标志符', type: 'string', defaulValue: '' },
		{ id: 2, name: 'title', describe: '面板标题', type: 'string', defaulValue: '' },
        { id: 3, name: 'disabled', describe: '是否禁用', type: 'boolean', defaulValue: 'false' },        
	];
const slotData2 = [
    { id: 1, name: 'default', describe: 'Collapse Item 的内容', type: 'object' },
    { id: 2, name: 'titleSlot', describe: 'Collapse Item 的标题', type: 'object' },
];
</script>
<div class="component-container">
	<div class="title">
		<div class="name">Collapse 折叠面板</div>
		<div class="describe">通过折叠面板收纳内容区域。</div>
	</div>
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">
			可同时展开多个面板，面板之间不影响。
		</div>
    </div>
    <ComponentPreview code={code1}>
        <div class="example">
            <div class="example-group">
                <Collapse bind:modelValue={activeItems}>
                    <CollapseItem name="Consistency" title="Consistency">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Feedback" title="Feedback">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Efficiency" title="Efficiency">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                        </div>
                    </CollapseItem>
                </Collapse>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">手风琴效果</div>
		<div class="describe">
			每次只能展开一个面板。通过&nbsp;&nbsp;
            <span class="tag">accordion</span>&nbsp;&nbsp;属性来设置是否以手风琴模式显示。
		</div>
    </div>
    <ComponentPreview code={code2}>
        <div class="example">
            <div class="example-group">
                <Collapse bind:modelValue={activeItems} accordion={true}>
                    <CollapseItem name="Consistency" title="Consistency">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Feedback" title="Feedback">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Efficiency" title="Efficiency">
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                        </div>
                    </CollapseItem>
                </Collapse>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">自定义面板标题</div>
		<div class="describe">
			除了可以通过&nbsp;&nbsp;
            <span class="tag">title</span>&nbsp;&nbsp;属性以外，还可以通过具名&nbsp;&nbsp;
            <span class="tag">titleSlot</span>&nbsp;&nbsp;来实现自定义面板的标题内容，以实现增加图标等效果。
		</div>
    </div>
    <ComponentPreview code={code3}>
        <div class="example">
            <div class="example-group">
                <Collapse bind:modelValue={activeItems} accordion={true}>
                    <CollapseItem name="Consistency" title="">
                        {#snippet titleSlot()}
							<div style="display: flex; align-items: center;gap: 6px;">
								<Icon src="interface/palette" size={18}></Icon>
                                <span>Consistency</span>
							</div>
						{/snippet}
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Feedback" title="">
                        {#snippet titleSlot()}
							<div style="display: flex; align-items: center;gap: 6px;">
								<Icon src="logo/favicon" size={18}></Icon>
                                <span>Feedback</span>
							</div>
						{/snippet}
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;Visual feedback: reflect current state by updating or rearranging elements of the page.
                        </div>
                    </CollapseItem>
                    <CollapseItem name="Efficiency" title="">
                        {#snippet titleSlot()}
							<div style="display: flex; align-items: center;gap: 6px;">
								<Icon src="office/notifications" size={18}></Icon>
                                <span>Efficiency</span>
							</div>
						{/snippet}
                        <div style="padding: 10px 16px;line-height: 1.5em;">
                            Simplify the process: keep operating process simple and intuitive;Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                        </div>
                    </CollapseItem>
                </Collapse>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">Collapse Attributes</div>
	</div>
	<Table data={attributesData1} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
    <div class="subtitle">
		<div class="name">Collapse Events</div>
	</div>
    <Table data={eventsData1} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>    
    <div class="subtitle">
		<div class="name">CollapseItem Attributes</div>
	</div>
	<Table data={attributesData2} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
    <div class="subtitle">
		<div class="name">CollapseItem Slot</div>
	</div>
    <Table data={slotData2} border={false} size="lg">
		<TableColumn key="name" title="名称" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>